<script setup lang="ts">
import type { ResultStatusType } from 'ant-design-vue/es/result'
import { reactive, onMounted } from 'vue'
import { useGlobalStore } from '@/stores/global'
import router from '@/router'

defineOptions({
  name: 'Error',
})

// 全局缓存存储
const cacheStore = useGlobalStore()

// 状态参数
const state = reactive<{
  status: ResultStatusType
  message: string
}>({
  status: 500,
  message: '',
})

// 重试
const onRetry = () => {
  cacheStore.setPageError(undefined)
  router.push({ name: 'Chat' })
}

onMounted(() => {
  const data = cacheStore.readPageError
  if (data) {
    state.status = [403, 404].includes(data.status) ? (data.status as 403 | 404) : 500
    state.message = data.message
  }
})
</script>

<template>
  <a-result :status="state.status" title="出错了" :sub-title="state.message">
    <template #extra>
      <a-button type="primary" @click="onRetry">重试</a-button>
    </template>
  </a-result>
</template>

<style lang="scss" scoped></style>
